<template>
  <div>
    <!--    基本信息-->
    <!--    <el-row :gutter="10" style="margin: 0">-->
    <!--      <div class="wrapper" v-for="item in infoData" :key="item.label">-->
    <!--        <el-col style="background-color: #fffbed" :span="4" class="info_item">-->
    <!--          <div class="item_content " :title="item.label">{{ item.label }}</div>-->
    <!--        </el-col>-->
    <!--        <el-col :span="8" class="info_item">-->
    <!--          <div class="item_content " :title="item.value">{{ item.value }}</div>-->
    <!--        </el-col>-->
    <!--      </div>-->
    <!--    </el-row>-->
    <div class="wrapper" v-for="item in infoData" :key="item.label" style="display:flex;">
      <div style="width: 50%;display:flex;">
        <div style="background-color: #fffbed;width: 30%;min-width: 30%" class="info_item">
          <div class="item_content " :title="item.label">{{ item.label }}</div>
        </div>
        <div style="width:  70%" class="info_item">
          <div class="item_content " :title="item.value">{{ item.value }}</div>
        </div>
      </div>
      <div style="width: 50%;display:flex;">
        <div style="background-color: #fffbed;width: 30%;min-width: 30%" class="info_item">
          <div class="item_content " :title="item.label1">{{ item.label1 }}</div>
        </div>
        <div style="width:  70%" class="info_item">
          <div class="item_content " :title="item.value1">{{ item.value1 }}</div>
        </div>
      </div>
    </div>
    <div class="base_box">
      <el-collapse-transition>
        <el-card :body-style="{padding:0}" v-show="cardShow">
          <el-form label-width="100px">
            <el-row :gutter="24" style="margin: 0;">
              <el-col style="background-color: #FFFFFF" :span="4" class="info_item">
                <div class="item_content overflow" :title="$t('姓名')">{{ $t('姓名') }}</div>
              </el-col>
              <el-col :span="8" class="info_item">
                <div class="item_content overflow" :title="data.name">{{ data.name }}</div>
              </el-col>
              <el-col style="background-color: #FFFFFF" :span="4" class="info_item">
                <div class="item_content overflow" :title="$t('手机号码')">{{ $t('手机号码') }}</div>
              </el-col>
              <el-col :span="8" class="info_item">
                <div class="item_content overflow" :title="data.phone">
                  <el-link :href="'sip:' +  data.phone + ',' + new Date().getTime()" :underline="false" type="primary">
                    {{ data.phone }}
                  </el-link>
                </div>
              </el-col>
              <el-col style="background-color: #FFFFFF" :span="4" class="info_item">
                <div class="item_content overflow" :title="$t('订单编号')">{{ $t('订单编号') }}</div>
              </el-col>
              <el-col :span="8" class="info_item">
                <div class="item_content overflow" :title="data.loanRecordId">{{ data.loanRecordId }}</div>
              </el-col>
              <el-col style="background-color: #FFFFFF" :span="4" class="info_item">
                <div class="item_content overflow" :title="$t('申请金额')">{{ $t('申请金额') }}</div>
              </el-col>
              <el-col :span="8" class="info_item">
                <div class="item_content overflow" :title="data.loanAmount">{{ data.loanAmount }}</div>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
      </el-collapse-transition>
      <div class="collapse">
        <el-button :icon="cardShow ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
                   @click="cardShow = !cardShow"></el-button>
      </div>
    </div>
  </div>
</template>

<script>
import {basicInfo} from "@/api/order";

export default {
  props:['routesQuery'],
  data() {
    return {
      infoData: [],
      data: {},
      cardShow: false,
    }
  },
  mounted() {
    for (let i = 0; i < 15; i++) {
      // 虚拟盒子占位
      this.infoData.push({})
    }
    this.getDataList()
  },
  computed: {
    listLabel() {
      return {
        'name': this.$t('姓名'),
        'phone': this.$t('手机号码'),
        'creationTime': this.$t('注册时间'),
        'channelName': this.$t('白名单渠道'),
        'seniorLabel': this.$t('用户标签'),
        'idcard': this.$t('身份证'),
        'gender': this.$t('性别'),
        'age': this.$t('年龄'),
        'dateBirth': this.$t('生日'),
        'maritalStatusStr': this.$t('婚姻状态'),
        'degreeStr': this.$t('学历'),
        'childrenNumStr': this.$t('子女个数'),
        'idCardAddress': this.$t('身份证地址'),
        'gpsAddress': this.$t('进件位置GPS'),
        'liveDetailedAddress': this.$t('现居住地址'),
        'eMali': this.$t('邮箱'),
        'facebook': 'facebook',
        'zalo': 'zalo',
        'whatsApp': 'whatsApp',
        'deviceInfo': this.$t('设备型号'),
        'deviceId': this.$t('设备id'),
        'osVersion': this.$t('APP信息'),
        'listType': this.$t('是否上架APP'),
        'isNaturalFlow': this.$t('安装类型'),
        'loanUseStr': this.$t('贷款用途'),
        'isWhiteList': this.$t('白名单'),
        'score': this.$t('黑猫分'),
        'osType': this.$t('设备系统')
      }
    }
  },
  methods: {
    async getDataList() {
      const {userStubId} = this.routesQuery

      const res = await basicInfo({
        userStubId: parseInt(userStubId)
      })
      if (res.code === 1) {
        this.data = {...res.data}
        const arr = []
        for (let i in this.listLabel) {
          let value = this.data[i]
          if (i === 'osVersion') {
            value = this.data[i] ? this.data['loanProductName'] + " " + "v" + this.data[i] : this.data['loanProductName']
          } else if (i === 'listType') {
            value = this.data[i] === 1 ? this.$t('是') : this.$t('否')
          } else if (i === "isNaturalFlow") {
            value = this.data[i] === 1 ? this.$t('自然量安装') : this.data[i] === 0 ? this.$t('非自然量安装') : this.$t('未知')
          } else if (i === 'osType') {
            value = this.data[i] ? this.data[i] + " " + " v" + (this.data['version'] || '') : ''
          } else if (i === 'seniorLabel') {
            const seniorTags = Object.keys(this.data['seniorLabel']).filter(item => {
              if (this.data['seniorLabel'][item] === 1) {
                return item
              }
            }).map(item => this.$t(item))
            value = seniorTags.join('，')
          }
          arr.push({
            label: this.listLabel[i],
            value: value,
          })
        }
        let reslut = []
        // 合并data
        const concatData = (list) => {
          if (list.length !== 0) {
            const obj = {}
            obj.label = list[0].label
            obj.value = list[0].value ? list[0].value : ''
            if (list.length > 1) {
              obj.label1 = list[1].label
              obj.value1 = list[1].value ? list[1].value : ''
            }
            reslut.push(obj)
            const arr = list.filter((item, index) => {
              return index !== 0 && index !== 1
            })
            concatData(arr)
          }
          return res
        }
        concatData(arr)
        this.infoData = reslut
      }
    },
  },
}
</script>

<style lang="less" scoped>
.wrapper {
  width: 100%;
  height: 100%;

  .info_item {
    border-bottom: 1px solid #dcdcdc;
    border-right: 1px solid #dcdcdc;
    padding: 3px 5px !important;
    min-height: 40px;

    .item_content {
      text-align: left;
      font-size: 13px;
      display: flex;
      height: 100%;
      align-items: center;
      word-break: break-all;
      text-overflow: ellipsis;
    }
  }
}

.base_box {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  margin: 0 auto;
  width: 50%;
  text-align: left;

  .info_item {
    border-bottom: 1px solid #dcdcdc;
    border-right: 1px solid #dcdcdc;
    padding: 5px 5px 5px 8px !important;
    background-color: #FFFFFF;

    .item_content {
      text-align: left;
      background-color: #FFFFFF;
      font-size: 14px;
      height: 30px;
      line-height: 30px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;

    }
  }

  .collapse {
    text-align: center;
    margin-top: -2px;
  }
}
</style>
